<template>
  <div class="home">
    <div class="box" ref="box1"></div>
    <div class="box" ref="box2"></div>
    <div class="box" ref="box3"></div>
    <div class="box" ref="box4"></div>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, onBeforeMount, watch, markRaw} from 'vue';
import * as echarts from 'echarts';
import {getTotalTypePrice} from '../../api/roomType';
import myLog from '../../utils/myLog';

export default {
  name: 'Home',
  setup(){
    const data = reactive({
      //柱状图
      myChart: {},
      //折线图
      myChartLine: {},
      //饼图
      myChartPie: {},
      //雷达图
      myChartRadar: {},
      //各房间类型的销售额数据
      totalTypePriceList: [],
    });

    //获取各房间类型的销售额数据
    const loadTypePrice = async () => {
      const list = await getTotalTypePrice();

      myLog('list loadTypePrice', list);
      data.totalTypePriceList = list;
    }

    onBeforeMount(() => {
      loadTypePrice();
    });

    const $this = getCurrentInstance();

    const zoomData=[  // 有滚动条 平移
        {
            type: 'slider',
            realtime: true,
            start: 0,
            end: 40,  // 初始展示40%
            height: 4,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)", 
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top:'96%',
            
            // zoomLock:true, // 是否只平移不缩放
            // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
            // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
        },
        { 
          type: "inside",  // 支持内部鼠标滚动平移
          start: 0,
          end: 40,
          zoomOnMouseWheel: false,  // 关闭滚轮缩放
          moveOnMouseWheel: true, // 开启滚轮平移
          moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
        }
    ];

    //绘制柱状图
    const drawBar = () => {
      // 基于准备好的dom，初始化echarts实例
      data.myChart = markRaw(echarts.init($this.refs.box1));

      // 绘制图表
      data.myChart.setOption({
        title: {
          text: '房间类型销售额（柱状图）'
        },
        tooltip: {},
        /* xAxis: {
          data: data.totalTypePriceList.map(roomType => roomType.roomTypeName)
        }, */
        xAxis: [
          {
            type: 'category',
            data: data.totalTypePriceList.map(roomType => roomType.roomTypeName)
          }
        ],
        yAxis: {},
        dataZoom: [
          /* {
            type: 'inside',
            start: 94,
            end: 100
          }, */
          {
            preventDefaultMouseMove: false, // 阻止 mousemove 事件的默认行为
            moveOnMouseWheel: false,        // 如何触发数据窗口平移
            type: 'inside',       // 滑动组件类型
            show: true,           // 控制是否显示
            start: 0,             // 初始化起始位置
            // end: xData.length > 12 ? Math.ceil((12 / xData.length) * 100) : 100, // 初始化终止位置
            end: 50, // 初始化终止位置
            bottom: 30,           // 控制滑动组件的位置,可以是具体的像素数值,也可以是百分比 ==> '20%'
            showDetail: true,     // 控制是否显示滑动组件的详情
          },
          /* {
            type: 'slider',
            start: 0,
            end: 50
          }, */
        ],
        /* dataZoom: [
          {
              // 设置滚动条的隐藏与显示
              show: true,
              // 设置滚动条类型
              type: "slider",
              // 设置背景颜色
              backgroundColor: "rgb(19, 63, 100)",
              // 设置选中范围的填充颜色
              fillerColor: "rgb(16, 171, 198)",
              // 设置边框颜色
              borderColor: "rgb(19, 63, 100)",
              // 是否显示detail，即拖拽时候显示详细数值信息
              showDetail: false,
              // 数据窗口范围的起始数值
              startValue: 0,
              // 数据窗口范围的结束数值（一页显示多少条数据）
              endValue: 5,
              // empty：当前数据窗口外的数据，被设置为空。
              // 即不会影响其他轴的数据范围
              filterMode: "empty",
              // 设置滚动条宽度，相对于盒子宽度
              width: "50%",
              // 设置滚动条高度
              height: 8,
              // 设置滚动条显示位置
              left: "center",
              // 是否锁定选择区域（或叫做数据窗口）的大小
              zoomLoxk: true,
              // 控制手柄的尺寸
              handleSize: 0,
              // dataZoom-slider组件离容器下侧的距离
              bottom: 3,
          },
          {
              // 没有下面这块的话，只能拖动滚动条，
              // 鼠标滚轮在区域内不能控制外部滚动条
              type: "inside",
              // 滚轮是否触发缩放
              zoomOnMouseWheel: false,
              // 鼠标滚轮触发滚动
              moveOnMouseMove: true,
              moveOnMouseWheel: true,
          },
        ], */
        /* dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter',
          },
          {
            id: 'dataZoomY',
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty',
          },
        ], */
        /* dataZoom: [
          {
              type: 'slider',
              realtime: true,
              start: 0,
              // end: 20,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
              height: 5, //组件高度
              left: '25%', //左边的距离
              right: '25%', //右边的距离
              bottom: '5%', //下边的距离
              show: true,  // 是否展示
              fillerColor: "rgba(2,110,252,1)", // 滚动条颜色
              borderColor: "rgba(17, 100, 210, 0.12)",
              backgroundColor: 'rgba(232,244,255,0.51)',//两边未选中的滑动条区域的颜色
              handleSize: 0,      //两边手柄尺寸
              showDetail: false, //拖拽时是否展示滚动条两侧的文字
              zoomLock: true,         //是否只平移不缩放
              moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
              //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放

              //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。
              startValue: 0, // 从头开始。
              endValue: 5,  // 最多5个
              // minValueSpan: 5,  // 放大到最少几个
              // maxValueSpan: 5,  //  缩小到最多几个
          },
          {
              type: "inside",  // 支持内部鼠标滚动平移
              start: 0,
              // end: 20,
              startValue: 0, // 从头开始。
              endValue: 5,  // 最多5个
              zoomOnMouseWheel: false,  // 关闭滚轮缩放
              moveOnMouseWheel: true, // 开启滚轮平移
              moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
          }
        ], */
        /* dataZoom: [
            {
                show: true,
                realtime: true,
                start: 65,
                end: 85
            },
            {
                type: 'inside',
                realtime: true,
                start: 65,
                end: 85
            }
        ], */
        // dataZoom: zoomData,
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: data.totalTypePriceList.map(roomType => roomType.totalMoney),
            cursor: 'grab',
          }
        ]
      });

      /* var symbolSize = 20;

      // 这个 data 变量在这里单独声明，在后面也会用到。
      var data1 = [
        [15, 0],
        [-50, 10],
        [-56.5, 20],
        [-46.5, 30],
        [-22.1, 40]
      ];

      data.myChart.setOption({
        xAxis: {
          min: -100,
          max: 80,
          type: 'value',
          axisLine: { onZero: false }
        },
        yAxis: {
          min: -30,
          max: 60,
          type: 'value',
          axisLine: { onZero: false }
        },
        series: [
          {
            id: 'a',
            type: 'line',
            smooth: true,
            symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。
            data: data1
          }
        ]
      }); */
    }

    //绘制折线图
    const drawLine = () => {
      // 基于准备好的dom，初始化echarts实例
      data.myChartLine = markRaw(echarts.init($this.refs.box2));

      // 绘制图表
      data.myChartLine.setOption({
        title: {
          text: '房间类型销售额（折线图）'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: data.totalTypePriceList.map(roomType => roomType.roomTypeName)
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [
          {
            preventDefaultMouseMove: false, // 阻止 mousemove 事件的默认行为
            moveOnMouseWheel: false,        // 如何触发数据窗口平移
            type: 'inside',       // 滑动组件类型
            show: true,           // 控制是否显示
            start: 0,             // 初始化起始位置
            // end: xData.length > 12 ? Math.ceil((12 / xData.length) * 100) : 100, // 初始化终止位置
            end: 50, // 初始化终止位置
            bottom: 30,           // 控制滑动组件的位置,可以是具体的像素数值,也可以是百分比 ==> '20%'
            showDetail: true,     // 控制是否显示滑动组件的详情
          },
        ],
        series: [
          {
            name: '销售额',
            type: 'line',
            data: data.totalTypePriceList.map(roomType => roomType.totalMoney),
            cursor: 'grab',
          }
        ],
      });
    }

    //绘制饼图
    const drawPie = () => {
      // 基于准备好的dom，初始化echarts实例
      data.myChartPie = markRaw(echarts.init($this.refs.box3));

      // 绘制图表
      data.myChartPie.setOption({
        title: {
          text: '房间类型销售额（饼图）'
        },
        tooltip: {},
        /* legend: {
          orient: 'vertical',
          left: 'left'
        }, */
        series: [
          {
            name: '销售额',
            type: 'pie',
            radius: '50%',
            data: data.totalTypePriceList.map(roomType => {
              const {totalMoney, roomTypeName} = roomType;

              return {
                value: totalMoney,
                name: roomTypeName,
              }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
      });
    }

    //绘制雷达图
    const drawRadar = () => {
      // 基于准备好的dom，初始化echarts实例
      data.myChartRadar = markRaw(echarts.init($this.refs.box4));

      // 绘制图表
      data.myChartRadar.setOption({
        title: {
          text: '房间类型销售额（雷达图）'
        },
        tooltip: {},
        radar: {
          // shape: 'circle',
          indicator: data.totalTypePriceList.map(roomType => {
            const {roomTypeName} = roomType;

            return {
              max: 1000,
              name: roomTypeName,
            }
          }),
        },
        series: [
          {
            name: '销售额',
            type: 'radar',
            data: [
              {
                value: data.totalTypePriceList.map(roomType => roomType.totalMoney),
                name: '销售额'
              }
            ]
          }
        ],
      });
    }

    watch(
      () => data.totalTypePriceList,
      () => {
        drawBar();
        drawLine();
        drawPie();
        drawRadar();
      }
    );
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  .box {
    width: 49%;
    height: 49%;
    border: solid 1px #DDD;
  }
}
</style>